<template>
  <n-modal :show="dialogFormVisible" @onUpdateShow="close">
    <div ref="modalRef" class="edit-dia" style="width: 800px">
      <mac-header
        title="资源详情"
        :is-fullscreen="isFullscreen"
        :show-desc="false"
        @toggle="toggle"
        @close="close"
      />
      <n-descriptions bordered style="margin-top: 20px" :column="4">
        <n-descriptions-item label="标题" :span="3">
          {{ info.name }}
        </n-descriptions-item>
        <n-descriptions-item label="是否封禁">
          <n-switch
            :value="info.private"
            :checkedValue="1"
            :uncheckedValue="0"
            @update:value="privateChange"
          />
        </n-descriptions-item>
        <n-descriptions-item label="分类">
          <n-tag type="info">{{ info.tabName }}</n-tag>
        </n-descriptions-item>
        <n-descriptions-item label="机构">
          <n-tag type="info">{{ info.institution_name }}</n-tag>
        </n-descriptions-item>
        <n-descriptions-item label="作者">
          <n-tag type="info">{{ info.author_name }}</n-tag>
        </n-descriptions-item>
        <n-descriptions-item label="国家">
          <n-tag type="info">{{ info.country }}</n-tag>
        </n-descriptions-item>
        <n-descriptions-item label="价格">
          {{ info.price }}
        </n-descriptions-item>
        <n-descriptions-item label="浏览量">
          {{ info.view }}
        </n-descriptions-item>
        <n-descriptions-item label="权重">
          {{ info.sort }}
        </n-descriptions-item>
        <n-descriptions-item label="购买人数">
          <n-button type="error" size="small" quaternary @click="handBuy">
            {{ info.buy_count }}
          </n-button>
        </n-descriptions-item>
        <n-descriptions-item label="图片数量">
          <n-button type="error" size="small" quaternary @click="handPrive">
            {{ info.photo_count }}
          </n-button>
        </n-descriptions-item>
        <n-descriptions-item label="视频数量">
          <n-button type="error" size="small" quaternary @click="handPrive">
            {{ info.video_count }}
          </n-button>
        </n-descriptions-item>
        <n-descriptions-item label="压缩包大小">
          {{ info.zipSize }}
        </n-descriptions-item>
        <n-descriptions-item label="举报人数">
          <n-button type="error" size="small" quaternary>
            {{ info.report_count }}
          </n-button>
        </n-descriptions-item>
        <n-descriptions-item label="下载链接">
          {{ info.netdisk }}
        </n-descriptions-item>
        <n-descriptions-item label="提取码">
          {{ info.extracted_code }}
        </n-descriptions-item>
        <n-descriptions-item label="解压码">
          {{ info.jiangkuaihe }}
        </n-descriptions-item>
        <n-descriptions-item label="创建时间">
          {{ info.create_at }}
        </n-descriptions-item>
        <n-descriptions-item label="标签" :span="4">
          <div class="tags">
            <div class="tag" v-for="item in info.tags" :key="item">
              <n-tag>{{ item }}</n-tag>
            </div>
          </div>
        </n-descriptions-item>
      </n-descriptions>
    </div>
  </n-modal>
  <buy-user ref="buyRef" />
  <ListDia ref="listRef" />
</template>
<script setup lang="ts">
import { ref, defineAsyncComponent, toRaw } from 'vue'
import {
  NModal,
  NDescriptions,
  NDescriptionsItem,
  NButton,
  NTag,
  NSwitch
} from 'naive-ui'
import MacHeader from '@/components/codeBlock/MacHeader'
import { useFullscreen } from '@vueuse/core'
import photoListApi from '@/service/api/photo/list'
const BuyUser = defineAsyncComponent(() => import('./BuyUser.vue'))
const ListDia = defineAsyncComponent(() => import('./ListDia.vue'))
const emit = defineEmits(['success'])

const buyRef = ref()
const handBuy = (): void => {
  buyRef.value.open(toRaw(info.value))
}

const privateChange = (status: any) => {
  photoListApi
    .editPrivate({
      id: info.value.id,
      private: status
    })
    .then(({ code }) => {
      if (code === 200) {
        info.value.private = status
        emit('success')
      }
    })
}

const listRef = ref()
const handPrive = (): void => {
  listRef.value.open(toRaw(info.value))
}

const modalRef = ref()
const { isFullscreen, toggle } = useFullscreen(modalRef)
const dialogFormVisible = ref(false)
interface infoState {
  id?: number
  name?: string
  private?: number
  tabName?: string
  institution_name?: string
  author_name?: string
  country?: string
  price?: number
  view?: number
  sort?: number
  buy_count?: number
  report_count?: number
  photo_count?: number
  video_count?: number

  create_at?: string
  tags?: string[]
  zipSize?: string
  netdisk?: string
  jiangkuaihe?: string
  extracted_code?: string
}
const info = ref<infoState>({})
const open = async (id: number) => {
  init(id)
  dialogFormVisible.value = true
}
const init = async (id: number) => {
  const { data } = await photoListApi.detail({
    photo_id: id
  })
  info.value = data
}
const close = () => {
  dialogFormVisible.value = false
}

defineExpose({
  open
})
</script>
<style scoped lang="scss">
.tool {
  margin-top: 20px;
  justify-content: center;
  .success {
    margin-left: 10px;
  }
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
</style>
